<template>
  <div class="app-container">
    <el-tabs>
      <el-tab-pane label="数据更新" name="first">
        <el-card class="ptm10">
          <div style="width: 145vh ;padding: 20px">
            <el-row :gutter="24">
              <el-col :span="23">
                <el-input
                  style="font-size: 16px"
                  type="textarea"
                  :autosize="{ minRows: 5, maxRows: 20}"
                  v-model="queryParams.sql">
                </el-input>
              </el-col>
              <el-col :span="1">
                <el-row style="margin-top: 40px">
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">执 行</el-button>
                </el-row>
                <el-row style="margin-top: 20px">
                  <el-button type="warning" icon="el-icon-search" size="mini" @click="clearSql">清 除</el-button>
                </el-row>
              </el-col>
            </el-row>
            <div>
            </div>
          </div>
        </el-card>
        <el-card class="p20">
          <el-table v-loading="loading"
                    :data="data"
                    :stripe="true"
                    :fit="true"
                    border highlight-current-row>
            <el-table-column label="序号" align="center" min-width="70" prop="PAGEHELPER_ROW_ID"/>
            <el-table-column v-for="rowName in rows" :label="rowName" align="center" min-width="150" :prop="rowName"
                             show-overflow-tooltip/>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            :pageSizes="[10,20,50,100,200,500]"
            @pagination="handleQuery"
          />
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="文件查询" name="second">
        <el-card class="p20">
          <el-input placeholder="请输入内容" v-model="bk" />
          <el-input placeholder="请输入内容" v-model="s3Path" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="findByPath"></el-button>
          </el-input>
          <el-table
                  :data="fileData"
                  :stripe="true"
                  :fit="true"
                  border highlight-current-row>
          <el-table-column label="类型" align="center" width="70" prop="type"/>
          <el-table-column label="名称" align="left" prop="name"/>
          <el-table-column label="操作" align="right" width="70">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-help" v-if="scope.row.type=='file'"
                         @click="download(scope.row)"
              >下载</el-button>
            </template>
          </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>



  </div>
</template>

<script>

import {updateData,findByPath} from '@/api/tool/gen.js'

export default {
  name: "Monitor/quiry/index",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sql: null
      },
      data: [],
      total: 0,
      rows: [
        '1', '2', '3', '4', '5', '6', '7', '8', '9'
      ],
      fileData:[],
      s3Path:'',
      bk:'kjda',
    }
  },
  methods: {
    executeQueryData() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.handleQuery();
    },
    handleQuery() {
      this.loading = true
      let sql = this.queryParams.sql
      let params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        sql: encodeURIComponent(sql)
      }
      // console.log(encodeURIComponent(sql))
      // console.log(btoa(sql))
      // console.log(btoa(encodeURIComponent(sql)))

      updateData(params).then(response => {
        console.log(response);
        if(response.code == '200'){
          this.msgSuccess("执行成功");
        }
      }).catch(() => {
        this.data = []
        this.total = 0
        this.rows = [ '1','2','3','4','5','6','7','8','9']
      }).finally(() => {
        this.loading = false
      })
    },

    parseTheTitle(data) {
      let rows = []
      let count = 0
      let objectIndex = 0
      for (let i = 0; i < data.length; i++) {
        let j = Object.getOwnPropertyNames(data[i]).length
        if (count < j) {
          count = j
          objectIndex = i
        }
      }
      for (const key of Object.keys(data[objectIndex])) {
        if (key !== 'PAGEHELPER_ROW_ID') {
          rows.push(key)
        }
      }
      return rows;
    },


    clearSql() {
      this.queryParams.sql = null
    },
    findByPath(){
      findByPath({path:this.s3Path,code:this.bk}).then(res => {
        this.fileData = res.rows;
      })
    },
    // 下载文件
    download(row) {
      console.log(row)
      let s3Path = this.s3Path
      let temp = row.name.split("/");
      let fileNameExt = temp[temp.length-1];//有后缀
      let fileName = "main";
      let extName = "jpg";
      if(fileNameExt.indexOf(".")>=1){
        let temp1 = fileNameExt.split(".");
        extName = temp1[temp1.length - 1]
        fileName = temp1[0];
      }
      this.downLoadFileUtils(s3Path, fileName, extName, name)
    },
  }


}
</script>

<style scoped>

</style>
